<template>
  <div class="YPSMS" v-loading="isLoading">
    <div class="header">
      治法术语
      <el-button
        type="success"
        style="float: right"
        icon="el-icon-s-home"
        circle
        @click="Home"
      ></el-button>
    </div>
    <div class="body">
      <div class="query" style="margin-bottom: 15px" v-if="false">
        <el-button
          @click="Add"
          icon="el-icon-plus"
          type="primary"
          style="margin-left: 15px"
        ></el-button>
      </div>
      <div class="box_1">
        <p>术语分类</p>
        <div class="box_1_1">
          <a
            class="box_1_item"
            v-for="item in type_1"
            :key="item.id"
            @click="flag_click(item)"
            @dblclick="del(item)"
            >{{ item.title }}</a
          >
        </div>
        <div v-if="type_2" style="margin-top: 15px" class="box_1_2">
          <p style="border: 0; padding: 0">{{ type_2_name }}</p>
          <a
            class="box_1_item"
            v-for="item in type_2"
            :key="item.id"
            @click="flag_click_2(item)"
            @dblclick="del(item)"
            >{{ item.title }}</a
          >
        </div>
      </div>
      <div class="list" style="margin-top: 20px">
        <div style="font-size: 20px; text-align: left" class="info_box">
          <div>
            术语分类：<el-input
              v-model="flag_1"
              style="display: inline-block; width: 250px"
            ></el-input>
            名称：<el-input
              v-model="flag_2"
              style="display: inline-block; width: 250px"
            ></el-input>
          </div>
          <quill-editor :content="info" @change="onEditorChange($event)" />
        </div>
        <el-button v-if="修改" type="success" @click="edit">修改</el-button>
        <el-button v-if="!修改" type="success" @click="add">保存</el-button>
        <!--  -->
      </div>
      <div class="list" v-if="false">
        <!-- <el-table
          :data="tableData"
          style="width: 100%"
          height="750"
          v-loading="isLoading"
        >
          <el-table-column prop="drugname" label="药品名称"> </el-table-column>
        </el-table> -->
        <span
          class="list_item"
          v-for="(item, index) in tableData"
          :key="index"
          @click="open(item)"
          >{{ item.drugname }}</span
        >
      </div>
      <div style="text-align: right; margin-top: 20px" v-if="false">
        共有 <span style="color: red">{{ pages.records }}</span> 条数据
      </div>
      <div style="text-align: center" v-if="false">
        <el-pagination
          background
          layout="prev, pager, next"
          :total.sync="pages.records"
          :page-size.sync="pages.size"
          :current-page="pages.page"
          @current-change="page_change"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import { quillEditor } from "vue-quill-editor";
export default {
  // 组件名称
  name: "",
  // 局部注册的组件
  components: {
    quillEditor,
  },
  // 组件参数 接收来自父组件的数据
  props: {},
  // 组件状态值
  data() {
    return {
      isLoading: false,
      query: "",
      query1: "",
      tableData: [],
      info: "",
      pages: {
        page: 1,
        size: 15,
        records: 0,
        total: 0,
      },
      dialogVisible: false,
      title: "",
      baseURL: "http://60.161.199.55:8004",
      type_1: [],
      type_2: [],
      type_2_name: "",
      //
      content_html: "",
      修改: false,
      flag_1: "",
      flag_2: "",
      formData: {},
    };
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 生命周期钩子   注：没用到的钩子请自行删除
  /**
   * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
   */
  created() {},
  /**
   * el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
   * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
   */
  mounted() {
    this.getList();
    this.getType1();
  },
  // 组件方法
  methods: {
    Home() {
      this.$router.push("/Home_Index_WH");
    },
    getList(title) {
      this.isLoading = true;
      // if (flag) {
      //   this.pages.page = 1;
      // }

      var body = {
        type: 1,
        page: this.pages.page,
        size: this.pages.size,
        param: title ? title : this.query,
      };
      this.$post("/w/SearchList", body).then((res) => {
        this.tableData = res.data;
        this.pages.records = res.records;
        this.pages.total = res.total;
        this.query1 = body.param;
        this.isLoading = false;
      });
    },
    open(row) {
      // this.title = row.drugname;
      // this.$post("/w/a/drugDetail?inputNo=" + row.pzwh).then((res) => {
      //   this.info = res.data;
      //   this.dialogVisible = true;
      // });
      window.open(
        baseUrl.baseIp + "/k/" + row.path,
        "newwindow",
        "height=500, width=1000, top=200, left=400, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=n o, status=no"
      );
    },
    handleClose() {
      this.dialogVisible = false;
    },
    page_change(val) {
      this.pages.page = val;
      this.getList();
    },
    getType1() {
      this.$post("/e/TheoryList?type=0").then((res) => {
        this.type_1 = res.data;
      });
    },
    getType2(type) {
      this.$post("/e/TheoryList?type=0&parentID=" + type).then((res) => {
        this.type_2 = res.data;
      });
    },
    flag_click(val) {
      this.getType2(val.id);
      this.type_2_name = val.title;
      this.flag_1 = val.title;
      this.flag_2 = "";
      this.info = "";
      this.修改 = false;
    },
    flag_click_2(val) {
      console.log(val);
      this.formData = val;
      this.info = val.content;
      this.flag_2 = val.title;
      this.修改 = true;
    },
    //

    onEditorChange({ quill, html, text }) {
      console.log(html);
      this.content_html = html;
      console.log(this.content_html);
    },
    edit() {
      var body = this.formData;
      body.content = this.content_html;
      console.log(body);
      (body.catagory = this.flag_1),
        this.$post("/api/ZyZfsy/Update", body).then((res) => {
          this.clear();
          this.$message({
            message: "操作成功",
            type: "success",
          });
        });
    },
    add() {
      var body = {
        content: "",
        type: 0,
        title: this.flag_2,
        catagory: this.flag_1,
      };
      body.content = this.content_html;
      console.log(body);

      this.$post("/api/ZyZfsy/Insert", body).then((res) => {
        this.clear();
        this.$message({
          message: "操作成功",
          type: "success",
        });
      });
    },
    del(val) {
      console.log(val);
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$post("/api/ZyZfsy/Delete", val).then((res) => {
            this.clear();
            this.$message({
              message: "删除成功",
              type: "success",
            });
          });
        })
        .catch(() => {});
    },
    clear() {
      this.formData = {};
      this.getList();
      this.getType1();
    },
  },
};
</script>

<style scoped lang="scss">
.YPSMS {
  background-color: rgb(255, 255, 230);
  width: 100vw;
  min-height: 100vh;
  .header {
    padding: 15px;
    font-size: 24px;
    font-weight: 700;
    color: rgb(143, 100, 57);
  }
  .body {
    width: 60%;
    margin: 0 auto;
    .box_items {
      display: inline-block;
    }
    .list {
      text-align: center;
    }
    .list_item {
      width: 170px;
      display: inline-block;
      padding: 6px 10px;
      color: rgb(143, 100, 57);
      font-weight: 700;
      border: 1px solid #000;
      margin: 10px;
      text-align: center;
      cursor: pointer;
    }
  }
  .box_1 {
    background-color: #eee;
    border: 1px solid rgb(100, 100, 100);
    .box_1_2 {
      background-color: #fff;
    }
    p {
      font-weight: 700;
      font-size: 20px;
      border-bottom: 2px solid rgb(100, 100, 100);
      padding: 5px 20px;
      margin: 0;
    }
    div {
      padding: 5px 20px;
    }
    .box_1_item {
      display: inline-block;
      margin: 2px 5px;
      font-size: 14px;
      width: 16.6%;
      text-align: center;
    }
  }
  .info_box {
    border: 1px solid #000;
  }
}

::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: rgb(143, 100, 57);
}
.el-icon-s-opportunity:before {
  color: rgb(2, 70, 254);
}
a:hover,
a:focus {
  color: rgb(2, 70, 254);
  text-decoration: underline;
}
</style>
